:host {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

.reached-event-title {
  margin-bottom: 24px;
}

.mat-mdc-chip {
  text-align: center;
  transition: background-color ease-out 1s;
  font-size: 12px;
  width: 66px;

  ::ng-deep {
    [matchipaction] {
      width: 100%;
    }
  }

  &.changed {
    background-color: var(--color-highlight) !important;
    transition: unset !important;
  }
}
